<template>
  <div class="common-layout">
    <el-container class="home_container">
      <el-header>
        <div style="height: 100%; width: 100%">
          <!-- 头部区域 -->
          <Header></Header>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 侧边栏区域 -->
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            :default-active="active_index"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            style="width: 100%"
            router
          >
            <div v-for="(menuItem, index) in menuInfoList" :key="index">
              <el-menu-item
                v-if="menuItem.children?.length === 0"
                :index="menuItem.routPath"
              >
                <el-icon>
                  <component :is="menuItem.icon"></component>
                </el-icon>
                <span>{{ menuItem.name }}</span>
              </el-menu-item>
            </div>
          </el-menu>
        </el-aside>
        <el-main>
          <div class="show-content">
            <!-- 内容区 -->
            <RouterView></RouterView>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import useMenuInfo from "@/hooks/useMenuInfo";
import Header from "./header.vue";
import { onMounted, ref } from "vue";
let active_index = ref("1");
const handleOpen = (key: string, keyPath: string[]) => {
  console.log("handleOpen函数执行");
  console.log(key, keyPath);
  console.log("变更激活序号", key);
  active_index.value = key;
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log("handleClose函数执行");
  console.log(key, keyPath);
};

const { menuInfoList } = useMenuInfo();
onMounted(() => {
  console.log("menuInfoList", menuInfoList);
});
</script>

<style scoped>
/* 基础布局样式 */
.common-layout {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.home_container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 内容区域样式 */
.show-content {
  height: 100%;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 侧边栏样式 */
.el-menu {
  height: 100%;
  border-right: none;
}

:deep(.el-aside) {
  background-color: #545c64;
  transition: width 0.3s;
}

:deep(.el-main) {
  padding: 20px;
  background-color: #fff;
}

:deep(.el-header) {
  padding: 0;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
}

/* 移除不必要的样式 */
/* .menu-content, .tac, .menuCol, .el-col 这些类可以删除，因为已经不需要了 */
</style>
